<template>
  <div class="box">
    <div
      :class="index == activeIndex ? 'title active' : 'title'"
      v-for="(item, index) in navArr"
      :key="index"
      @click="go(index)"
    >
      {{ item }}
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ref, reactive, toRefs, watch } from 'vue'
export default defineComponent({
  name: 'AdminMain',
  components: {},
  props: {
    // 导航标题
    navArr: {
      type: Array,
      require: true
    },
    // 类名
    className: {
      type: String,
      require: true
    },
    // 下标
    currentIndex: {
      type: Number,
      default: 0
    }
  },
  // ----------------生命周期-----------------------
  setup(props, { emit }) {
    const state = reactive({
      activeIndex: 0,
      activeIdx: 0
    })
    function go(index: number) {
      state.activeIndex = index
      emit('onScrollNav', index, props.className)
    }
    watch(
      () => props.currentIndex,
      (val) => {
        state.activeIndex = val
      }
    )
    return { go, ...toRefs(state) }
  }
})
</script>

<style lang="stylus" scoped>
.box
    position: absolute
    top 0
    .title
      margin-bottom  30px
      color #000
      text-indent 5px
      cursor pointer
    .title:hover
      color #409eff
    .child-nav
      list-style none
      padding 0
      li
        margin 15px 0
        padding 0 12px
        box-sizing  border-box
    .active
      border-left 3px solid #409eff
      color #409eff
    .activeChild
      border-left 3px solid #409eff
      color #409eff
</style>
